<template>
  <div class="detail">
    <Header :text="text"/>
    <div class="detail-content">
        <el-form :model="formLabelAlign" :rules="rules" ref="ruleForm" label-position="top">
          <el-collapse v-model="activeNames">
            <el-collapse-item title="货物信息" name="1">
              <el-form-item label="紧急度:" prop="aog">
                <el-radio-group v-model="formLabelAlign.aog">
                  <el-radio label="普货"></el-radio>
                  <el-radio label="AOG"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="调拨单:">
                <van-uploader v-model="fileList" multiple accept="image/*"/>
              </el-form-item>
            </el-collapse-item>
            <el-collapse-item title="寄件信息" name="2">
              <el-form-item label="寄件组织部门:" prop="danwei">
                <el-input size="mini" v-model="formLabelAlign.danwei" placeholder="请输入寄件组织部门"/>
              </el-form-item>
              <el-form-item label="寄件人姓名:" prop="start">
                <el-input size="mini" v-model="formLabelAlign.start" placeholder="请输入寄件人姓名"/>
              </el-form-item>
              <el-form-item label="寄件人电话:" prop="target">
                <el-input size="mini" v-model="formLabelAlign.target" placeholder="请输入寄件人电话"/>
              </el-form-item>
              <el-form-item label="寄件地址:" prop="a">
                <el-input size="mini" v-model="formLabelAlign.a" placeholder="请输入寄件地址"/>
              </el-form-item>
              <el-form-item label="收件人姓名:" prop="b">
                <el-input size="mini" v-model="formLabelAlign.b" placeholder="请输入收件人姓名"/>
              </el-form-item>
              <el-form-item label="收件公司名称:" prop="d">
                <el-input size="mini" v-model="formLabelAlign.d" placeholder="请输入收件公司名称"/>
              </el-form-item>
              <el-form-item label="收件地址:" prop="e">
                <el-input size="mini" v-model="formLabelAlign.e" placeholder="请输入收件地址"/>
              </el-form-item>
               <el-form-item label="收件人电话:" prop="c">
                <el-input size="mini" v-model="formLabelAlign.c" placeholder="请输入收件人电话"/>
              </el-form-item>
              <el-form-item label="备用收件人电话:">
                <el-input size="mini" v-model="formLabelAlign.g" placeholder="请输入备用收件人电话"/>
              </el-form-item>
            </el-collapse-item>
          </el-collapse>
        </el-form>
    </div>
    <div class="bottom">
      <el-button type="danger" @click="handleCancel">取消申请</el-button>
      <el-button type="primary" @click="handleOk">提交申请</el-button>
    </div>
  </div>
</template>

<script>
import Header from "@/components/common/Header"
export default {
  // 变量
  data() {
    return {
      text: '',
      activeNames: ['1','2'],
      fileList: [],
      formLabelAlign: {
        aog: '',
        danwei: '',
        start: '',
        target: '',
        a: '',
        b: '',
        c: '',
        d: '',
        e: ''
      },
      rules: {
        aog: [ { required: true, message: '请选择紧急度', trigger: 'change' } ],
        danwei: [ { required: true, message: '请输入寄件组织部门', trigger: 'blur' } ],
        start: [ { required: true, message: '请输入寄件人姓名', trigger: 'blur' } ],
        target: [ { required: true, message: '请输寄件人电话', trigger: 'blur' } ],
        a: [ { required: true, message: '请输入寄件地址', trigger: 'blur' } ],
        b: [ { required: true, message: '请输入收件人姓名', trigger: 'blur' } ],
        c: [ { required: true, message: '请输入收件人电话', trigger: 'blur' } ],
        d: [ { required: true, message: '请输入收件公司名称', trigger: 'blur' } ],
        e: [ { required: true, message: '请输入收件地址', trigger: 'blur' } ]
      }
    }
  },
  // 使用其他组件
  components: {
    Header
  },
  // 方法
  methods: {
    handleCancel() {
      this.$router.go(-1)
    },
    handleOk() {
      this.$refs.ruleForm.validate(valid => {
        if(valid) return false
      })
    }
  },
  // 生命周期函数
  created() {
    this.text = this.$route.query.text
  }
}
</script>

<style scoped>
/* 修改tab */
.detail-content {
  position: relative;
  top: 19.333vw;
  left: 0;
  padding: 0 10px;
  height: calc(100vh - 150px);
  overflow-y: scroll;
}
.bottom {
  position: fixed;
  display: flex;
  justify-content: space-evenly;
  bottom: 10px;
  left: 0;
  width: 100%;
  padding: 0 10px;
}
.el-button {
  flex: 1;
}
/deep/.el-collapse {
  border-top: 0;
}
/deep/.el-collapse-item__header {
  font-size: 5vw !important;
  font-weight: bold;
}
/deep/.el-collapse-item__content {
  font-size: 3.889vw !important;
}
/deep/.el-collapse-item__content {
  padding-bottom: 0;
}
/deep/.el-form-item {
  margin-bottom: 0 !important;
}
/deep/.el-form-item__label {
  padding-bottom: 0 !important;
}
/deep/.el-form-item__error {
  padding-top: 0 !important;
}
</style>
